<template>
  <div class="wel-pg">
    <!--头像区域-->
    <div class="look">
      <img :src="imgSrc" alt="" @mousedown="showAnger" @mouseup="hideAnger">
    </div>
    <!--打字机效果-->
    <div class="line-box">
      <p class="line animation1">诶，发生肾么事了?</p>
    </div>
    <div class="line-box">
      <p class="line animation2">哦，原来有人点进了<span class="myhome">我的博客</span>，看来是有Bear而来～</p>
    </div>
    <!--按钮效果-->
    <a href="javascript:;" class="enterBtn" @click="toHome">
      <p>进入主页</p>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>

</template>

<script>
  export default {
    name: "Welcome",
    data() {
      return {
        imgSrc: '',
        blink_index: 0,
        timeout: 100,
        blinkAnimation: null
      }
    },
    mounted() {
      this.blink()
    },
    methods: {
      blink() {
        if (this.blink_index === 2) {
          this.blink_index = 1
        } else {
          this.blink_index += 1
        }
        this.imgSrc = require('../assets/images/mbg' + this.blink_index + '.jpg')
        this.blinkAnimation = setTimeout(() => {
          this.blink()
        }, this.timeout)
      },
      showAnger() {
        clearTimeout(this.blinkAnimation)
        this.imgSrc = require('../assets/images/mbg3.jpg')
      },
      hideAnger() {
        this.blink()
      },
      toHome() {
        this.$router.push('/home')
      }
    }
  }
</script>

<style scoped lang="scss">
  @font-face {
    font-family: "myFont";
    src: url("../assets/font/2012DingYongKangYingBiKaiShuXinBan-2.ttf");
  }
  .wel-pg {
    width: 100%;
    height: 100vh;
    background: #0F0F13;
    position: relative;
    
    .look {
      position: absolute;
      top: 30%;
      left: 8vw;
      cursor: pointer;
      
      img {
        width: 15vw;
        border-radius: 30%;
        animation: appear 1.5s 0s normal none;
      }
      
      @keyframes appear {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }
    }
    
    .line-box {
      z-index: 9;
      position: absolute;
      left: 26vw;
      overflow: hidden;
      color: #eee;
      &:nth-of-type(2) {
        top: 30vh;
      }
  
      &:nth-of-type(3) {
        top: 40vh;
      }
      
      
      p {
        border-right: 2px solid transparent;
        text-align: center;
        white-space: nowrap;
        
        .myhome {
          color: #daac20;
        }
      }
    }
    

    
    .animation1 {
      animation: grow1 1.5s steps(44) 1s both,
      blink1 500ms steps(84) 6 both;
    }
    
    .animation2 {
      animation: grow2 3s steps(64) 2.7s both,
      blink2 800ms steps(64) 2.7s normal infinite;
    }
    
    @keyframes grow1 {
      from {
        width: 0;
      }
      to {
        width: 1rem * 8.5;
      }
    }
    
    @keyframes grow2 {
      from {
        width: 0;
      }
      to {
        width: 1rem * 22.9;
      }
    }
    
    @keyframes blink1 {
      from {
        border-right-color: #eee;
      }
      to {
        border-right-color: transparent;
      }
    }
    
    @keyframes blink2 {
      from {
        border-right-color: transparent;
      }
      to {
        border-right-color: #eee;
      }
    }
    
    .enterBtn {
      z-index: 9;
      position: absolute;
      left: 50%;
      top: 55vh;
      transform: translateX(-9vw);
      width: 13vw;
      height: 8vh;
      line-height: 7vh;
      text-align: center;
      font-weight: bold;
      /*font-family: Menlo, monospace;*/
      /*font-family: "Stxihei", "Microsoft YaHei";*/
      font-family: myFont;
      text-decoration: none;
      letter-spacing: .4vw;
      overflow: hidden;
      border-radius: 15px;
      animation: show .2s linear 5.8s 1 both;
  
      p {
        background: #0F0F13;
        color: #9aeb42;
        border: 4px solid #9aeb42;
        width: 100%;
        height: 100%;
        opacity: 0;
        animation: show .2s linear 6.8s 2 both;
      }
      
      &:hover {
        box-shadow: 0 0 10px #9aeb42, 0 0 50px #9aeb42;
      }
      
      &:hover p {
        background: #9aeb42;
        color: #0F0F13;
        
      }
      
      span {
        z-index: 10;
        position: absolute;
        display: inline-block;
      }
      
      span:nth-child(2) {
        top: 0;
        left: -100%;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, transparent, #9aeb42);
        animation: move1 .6s linear 6s normal both;
      }
      
      @keyframes move1 {
        from {
          left: -100%;
        }
        to {
          left: 100%;
        }
      }
      
      span:nth-child(3) {
        top: -100%;
        right: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #9aeb42);
        animation: move2 .6s linear 6.2s normal both;
      }
      
      @keyframes move2 {
        from {
          top: -100%;
        }
        to {
          top: 100%;
        }
      }
      
      span:nth-child(4) {
        bottom: 0;
        left: 100%;
        width: 100%;
        height: 4px;
        background: linear-gradient(270deg, transparent, #9aeb42);
        animation: move3 .6s linear 6.4s normal both;
      }
      
      @keyframes move3 {
        from {
          left: 100%;
        }
        to {
          left: -100%;
        }
      }
      
      span:nth-child(5) {
        top: 100%;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #9aeb42);
        animation: move4 .6s linear 6.6s normal both;
      }
      
      @keyframes move4 {
        from {
          top: 100%;
        }
        to {
          top: -100%;
        }
      }
      @keyframes show {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }
  }

</style>